<template>
	<view class="">
		<view class="mask" v-if="isShowBeautifulShare">
			<view class="share_code_box">
				<image :src="newbeautifulPoster.data" mode="widthFix" class="share_code_img" @longtap="saveShareImg"></image>

				<view class="close_icon_box">
					<image src="/static/home/icon-close-new.png" mode="" class="close_icon"
						@click="handleCloseBeautifulShare">
					</image>
				</view>

				<view class="btn_box">
					<view class="btn_box_title">长按可保存</view>
					
					<!-- <view class="btn_share" v-for="(item, index) in bottonBtnList" :key="index"
						:class="[isActive == index ? 'btn_share_active' : '']" @click="handleShareBtn(item, index)">
						{{ item }}
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['beautifulPoster'],
		data() {
			return {
				isShowBeautifulShare: false,
				shareImg: 'https://saler.jkcae.com/poster/package_poster/1/1/package_poster_1_1_50_546.jpg?v=1724828756',
				newbeautifulPoster: {},
				bottonBtnList: [
					'分享商城海报',
					'进入设备商城'
				],
				isActive: 0,
				// touchStartTime: 0
			}
		},
		watch: {
			beautifulPoster: {
				handler(newVal) {
					this.newbeautifulPoster = newVal
				}
			}
		},
		methods: {
			saveShareImg(){
					uni.downloadFile({
						//下载
						url: this.newbeautifulPoster.data, //图片下载地址
						success: (res) => {
							if (res.statusCode === 200) {
								uni.hideLoading();
								uni.saveImageToPhotosAlbum({
									//保存图片到系统相册。
									filePath: res.tempFilePath, //图片文件路径
									success: function () {
										uni.showToast({
											title: '图片保存成功',
											icon: 'none'
										});
									},
									fail: function (e) {
										uni.showToast({
											title: '图片保存失败',
											icon: 'none'
										});
									}
								});
							}
						}
					});
				// uni.showActionSheet({
				//     itemList: ['保存到手机'],
				//     success: r => {
				//         if (r.tapIndex === 0) {
				//             uni.downloadFile({ //下载
				//             	url: this.newbeautifulPoster.data, //图片下载地址
				//             	success: res => {
				//             		if (res.statusCode === 200) {
				//             			uni.hideLoading()
				//             			uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
				//             				filePath: res.tempFilePath, //图片文件路径
				//             				success: function() {
				//             					uni.showToast({
				//             						title: '图片保存成功',
				//             						icon: 'none',
				//             					});
				//             				},
				//             				fail: function(e) {
				//             					uni.showToast({
				//             						title: '图片保存失败',
				//             						icon: 'none',
				//             					});
				//             				}
				//             			});
				//             		}
				//             	}
				//             });
				//         }
				//     },
				//     fail: function (err) {
				//         console.error(err);
				//     }
				// });
			},
			// 分享
			handleShare(val) {
				if (val.id == 0) {
					uni.setClipboardData({
						data: this.newbeautifulPoster.url,
						success: function() {
							uni.showToast({
								title: '复制成功',
								icon: 'success'
							})
						}
					})
				} else if (val.id == 1) {
					uni.showLoading({
						title: '保存海报中'
					})
					uni.downloadFile({ //下载
						url: this.newbeautifulPoster.data, //图片下载地址
						success: res => {
							if (res.statusCode === 200) {
								uni.hideLoading()
								uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
									filePath: res.tempFilePath, //图片文件路径
									success: function() {
										uni.showToast({
											title: '图片保存成功',
											icon: 'none',
										});
									},
									fail: function(e) {
										uni.showToast({
											title: '图片保存失败',
											icon: 'none',
										});
									}
								});
							}
						}
					});
				} else if (val.id == 2) {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: this.newbeautifulPoster.data,
						success: function(res) {
							uni.showToast({
								title: '分享微信好友成功',
								icon: 'success'
							})
						},
						fail: function(err) {
							uni.showToast({
								title: '分享微信好友失败',
								icon: 'error'
							})
							return
						}
					});
				}
			},

			// 关闭
			handleCloseBeautifulShare() {
				this.$emit('handleCloseBeautifulShare', '')
			},

			// 选择按钮
			handleShareBtn(item, index) {
				this.isActive = index
				if (item == '分享商城海报') {
					uni.showLoading({
						title: '保存海报中'
					})
					uni.downloadFile({ //下载
						url: this.newbeautifulPoster.data, //图下载地址
						success: res => {
							if (res.statusCode === 200) {
								uni.hideLoading()
								uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
									filePath: res.tempFilePath, //图片文件路径
									success: function() {
										uni.showToast({
											title: '图片保存成功',
											icon: 'none',
										});
									},
									fail: function(e) {
										uni.showToast({
											title: '图片保存失败',
											icon: 'none',
										});
									}
								});
							}
						}
					});
					// uni.share({
					// 	provider: "weixin",
					// 	scene: "WXSceneSession",
					// 	type: 2,
					// 	imageUrl: this.newbeautifulPoster.data,
					// 	success: function(res) {
					// 		uni.showToast({
					// 			title: '分享微信好友成功',
					// 			icon: 'success'
					// 		})
					// 	},
					// 	fail: function(err) {
					// 		uni.showToast({
					// 			title: '分享微信好友失败',
					// 			icon: 'error'
					// 		})
					// 		return
					// 	}
					// });
				} else {
					plus.runtime.openWeb(this.newbeautifulPoster.url)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		/* 遮罩层样式 */
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;

		.share_code_box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.share_code_img {
				width: 500rpx;
				height: 719rpx;
				border-radius: 12rpx;
			}

			.btn_box {
				
				position: absolute;
				bottom: -40rpx;
				left: 0;
				display: flex;
				width: 100%;
				.btn_box_title{
					font-size: 28rpx;
					width: 100%;
					color: #FFFFFF;
					text-align: center;
				}
				// .btn_share {
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	width: 50%;
				// 	height: 61rpx;
				// 	background: #F5F5F5;
				// 	border: 1px solid #E6E6E6;
				// 	font-family: button-font;
				// 	font-weight: 300;
				// 	font-size: 22rpx;
				// 	color: #666666;
				// 	border-radius: 0 0 12rpx 12rpx;
				// }

				// .btn_share_active {
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	width: 50%;
				// 	height: 61rpx;
				// 	background: #0E255B;
				// 	font-family: button-font;
				// 	font-weight: 300;
				// 	font-size: 22rpx;
				// 	color: #FFFFFF;
				// 	border-radius: 0 0 12rpx 12rpx;
				// }
			}

			.close_icon_box {
				position: absolute;
				top: -40rpx;
				right: -54rpx;

				.close_icon {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.share_btn_box {
			position: absolute;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 750rpx;
			height: 212rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			padding: 0 39rpx 0 43rpx;

			.share_btn_all {
				display: flex;
				flex-direction: column;
				align-items: center;

				.share_icon_box {
					width: 88rpx;
					height: 88rpx;

					.share_icon {
						width: 100%;
						height: 100%;
					}
				}

				.share_name {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					padding-top: 24rpx;
				}
			}
		}
	}
</style>